<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1.0,minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/all.css">
  <link rel="stylesheet" href="../font/font-awesome-4.7.0/css/font-awesome.min.css">
  <title>Document</title>
</head>
<body>
  <div class="quiz" id="quizs" v-cloak>
    <div class="category">
      <ul>
        <li><a href="./quiz-dynamic.html">竞猜动态</a></li>
        <li><a href="./quiz-game.html">单场竞猜</a> </li>
        <li class="active">冠军竞猜</li>
      </ul>
    </div>
    <div class="quiz-team">
      <ul>
        <li v-for="item in countries">
          <span class="team-img"><img :src="item.path" alt=""></span>
          <span class="team-detail"><span>{{item.name}} <b>{{item.odds}}</b></span><span><b>押注:42123</b><b>已压2500</b> </span></span>
          <span @click="goclose" class="team-quiz"><img src="../img/icon-win.png" alt=""></span>
        </li>
      </ul>
    </div>
    <div class="mask" v-show="show">
        <div class="alert">
        <span @click="goclose" class="close">+</span>
        <ul>
          <li>押注<span>埃及</span>获胜</li>
          <li>节操剩余:12345</li>
          <li>
            <span>10<b>节操</b><i></i></span>
            <span>50<b>节操</b><i></i></span>
            <span>250<b>节操</b><i></i></span>
            <span>1000<b>节操</b><i></i></span>
          </li>
          <li>
            <p>说明:</p><p>1、押注后无法取消，请谨慎下注</p><p>2、按90分钟为结算标准，90分钟为平局则该场比赛为平局</p>
            <p>3、竞猜纯粹娱乐，请勿过于投入</p>
          </li>
        </ul>
      </div>
      </div>
  </div>

  <script src="../js/jquery-3.2.1.min.js"></script>
  <script src="../js/size.js"></script>
  <script src="../js/underscore.js"></script>
  <script src="../js/vue.js"></script>
  <script>
    var Quiz = new Vue({
      el:"#quizs",
      data:{
        show:false,
        state:true,
        stat:false,
        dyn:true,

        countries:[
          {name:'巴西',odds:"4/1",path:'../img/Brazil.png'},{name:'德国',odds:"9/2",path:'../img/Germany.png'},
          {name:'西班牙',odds:"11/2",path:'../img/Spain.png'},{name:'法国',odds:"6/1",path:'../img/France.png'},
          {name:'阿根廷',odds:"9/1",path:'../img/Argentina.png'},{name:'比利时',odds:"11/1",path:'../img/Belgium.png'},
          {name:'英格兰',odds:"16/1",path:'../img/England.png'},{name:'葡萄牙',odds:"22/1",path:'../img/Portugal.png'},
          {name:'乌拉圭',odds:"28/1",path:'../img/Uruguay.png'},{name:'哥伦比亚',odds:"23/1",path:'../img/Colombia.png'},
          {name:'克罗地亚',odds:"33/1",path:'../img/Croatia.png'},{name:'俄罗斯',odds:"40/1",path:'../img/icon-els.png'},
          {name:'波兰',odds:"50/1",path:'../img/Poland.png'},{name:'墨西哥',odds:"80/1",path:'../img/Mexico.png'},
          {name:'丹麦',odds:"80/1",path:'../img/Denmark.png'},{name:'瑞士',odds:"100/1",path:'../img/Switzerland.png'},
          {name:'瑞典',odds:"125/1",path:'../img/Sweden.png'},{name:'尼日利亚',odds:"150/1",path:'../img/Nigeria.png'},
          {name:'埃及',odds:"150/1",path:'../img/Egypt.png'},{name:'塞内加尔',odds:"150/1",path:'../img/Senegal.png'},
          {name:'秘鲁',odds:"150/1",path:'../img/icon-Peru.png'},{name:'塞尔维亚',odds:"150/1",path:'../img/Serbia.png'},
          {name:'冰岛',odds:"200/1",path:'../img/Iceland.png'},{name:'日本',odds:"250/1",path:'../img/Japan.png'},
          {name:'摩洛哥',odds:"300/1",path:'../img/Morocco.png'},{name:'韩国',odds:"400/1",path:'../img/South Korea.png'},
          {name:'澳大利亚',odds:"400/1",path:'../img/Australia.png'},{name:'哥斯达黎加',odds:"400/1",path:'../img/Costa Rica.png'},
          {name:'伊朗',odds:"500/1",path:'../img/Iran.png'},{name:'突尼斯',odds:"500/1",path:'../img/Tunisia.png'},
          {name:'沙特阿拉伯',odds:"750/1",path:'../img/icon-stalb.png'},{name:'巴拿马',odds:"750/1",path:'../img/Panama.png'}
        ],
      },
      mounted(){

      },
      methods:{
        goclose:function(){
          Quiz.show=!Quiz.show;
        }
      }
    })
  </script>
</body>
</html>